<template>
  <el-drawer
        size="300"
        :show-close="false"
        :modal="false"
        :visible.sync="drawer">
      <div style="padding: 10px" :key="key">
        <el-form label-position="left" label-width="100px" v-model="detail">
          <el-form-item label="背景色">
            <el-color-picker v-model="detail.background" @active-change="updateBackground" show-alpha size="small"></el-color-picker>
          </el-form-item>
        </el-form>
      </div>
  </el-drawer>
</template>

<script>

export default {
  data () {
    return {
      key: 1,
      drawer: false
    }
  },
  methods: {
    updateBackground (val) {
      this.detail.background = val
    }
  },
  computed: {
    detail () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail
    }
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
